import s from "./play-canvas.module.css";
import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const PlayCanvasView = defineView({
  /**
   * @implements {ng.IController}
   */
  controller: class PlayCanvasViewController {
    static $inject = ["$scope", "$element", "$timeout", "$q"];

    // style = {
    //   canvas {
    //     border: 1px solid black;
    //   }
    // };
    /**
     * @param {ng.IScope} $scope
     * @param {ng.IAugmentedJQuery} $element
     * @param {ng.ITimeoutService} $timeout
     * @param {ng.IQService} $q
     */
    constructor($scope, $element, $timeout, $q) {
      this.$scope = $scope;
      this.$element = $element;
      this.$timeout = $timeout;
      this.$q = $q;
    }

    $onInit() {
      console.log("PlayCanvasView init");
      this.$timeout(() => {
        this.setCanvas();
      });
    }

    $postLink() {
      console.log("PlayCanvasView postLink");
    }

    setCanvas() {
      console.log("PlayCanvasView setCanvas");
      const ctx = this.canvas?.getContext("2d");

      if (!ctx) return;
      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect(10, 10, 55, 55);

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect(30, 30, 55, 55);
    }

    handleClick() {
      console.log("PlayCanvasView", this);
    }

    /**
     * @type {HTMLCanvasElement | null}
     */
    get canvas() {
      return document.querySelector("canvas#tutorial");
    }
  },
  controllerAs: "$playCanvasView",
  template: /* HTML */ html`
    <canvas
      id="tutorial"
      width="95"
      height="95"
      class="border border-solid border-black"
    ></canvas>
    <button ng-click="$playCanvasView.setCanvas()">Click</button>
    ${DebugButtonHTML("$playCanvasView")}
  `,
});

export default PlayCanvasView;
